<template>
    <div class="sideMenu">
        <el-menu
            :uniqueOpened="true"
            default-active="1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            @select="handleSelect"
            background-color="rgba(26,83,117,.4)"
            text-color="#fff"
            :active-text-color="currentColor"
        >
            <el-submenu
                v-for="(item, index) in list"
                :key="index"
                :index="index + '1'"
            >
                <template #title>
                    <i
                        :class="item.icon"
                        style="color: rgba(8, 199, 241, 1)"
                    ></i>
                    <span>
                        {{ item.name }}
                        {{ item.value }}
                    </span>
                </template>
                <el-menu-item-group>
                    <el-menu-item
                        v-for="(item1, index1) in item.child"
                        :key="index1"
                        :index="index + '-' + index1"
                        @click="childHandleClick(item1.name, item1)"
                    >
                        {{ item1.name }}
                        {{ item1.value }}
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </div>
</template>

<script>
import { getCurrentInstance, onMounted, ref, reactive, nextTick } from "vue";
import { get } from "../../../util/request";
import { ElLoading } from "element-plus";

//composition APi下，监听的数据均为proxy类型，输出的必须是proxy才对
export default {
    setup() {
        let list = reactive([
            {
                name: "三维模型",
                value: 12,
                isOpen: true,
                icon: "el-icon-office-building",
                child: window.allTilesArr,
            },
        ]);
        let currIndex = ref(false);
        let centerState = ref(false);
        let currentColor = ref("#ffd04b");
        list.forEach((item) => {
            reactive(item);
        });
        function openClose(index) {
            list[index].isOpen = !list[index].isOpen;
            list.forEach((item, index1) => {
                if (index1 !== index) {
                    item.isOpen = false;
                }
            });
        }
        // let loadingInstance = null;
        function childHandleClick(name, item) {
            centerState.value = !centerState.value;
            if (centerState.value) {
                if (name == "海南福山油田勘探开发花场处理中心") {
                    // loadingInstance = ElLoading.service({
                    //     lock: true,
                    //     text: '数据加载中',
                    //     spinner: 'el-icon-loading',
                    //     background: 'rgba(0, 0, 0, 0.7)'
                    // })
                    addDTH(item.url);
                } else {
                    //  loadingInstance = ElLoading.service({
                    //     lock: true,
                    //     text: '数据加载中',
                    //     spinner: 'el-icon-loading',
                    //     background: 'rgba(0, 0, 0, 0.7)'
                    // })
                    let tilesetModel = new Cesium.Cesium3DTileset({
                        url: item.url,
                    });
                    tilesetModel.readyPromise
                        .then(function (argument) {
                            nextTick(() => {
                                // loadingInstance.close();
                            });
                            viewer.scene.primitives.add(tilesetModel);
                            viewer.zoomTo(tilesetModel);
                        })
                        .otherwise(function (error) {});
                    layerManager.Tile = tilesetModel;
                }
                currentColor.value = "#ffd04b";
            } else {
                layerManager.fly(
                    109.91123654020095,
                    18.544365698380496,
                    504517,
                    6.277847123239442,
                    -1.4135590100182913,
                    0.0012463398789694935
                );
                layerManager.removeAll();
                currentColor.value = "#fff";
            }
        }

        onMounted(() => {});
        function handleOpen(key, keyPath) {}
        function handleClose(key, keyPath) {}
        function handleSelect(key, keyPath) {}
        function addDTH(url) {
            //添加单体化数据
            var tilesetClass = new Cesium.Cesium3DTileset({
                url: `./data/circle1/tileset.json`,
                classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
            });
            // 设置单体化初始颜色
            tilesetClass.style = new Cesium.Cesium3DTileStyle({
                color: "rgba(255.0,255.0,0.0, 0.1)",
            });
            viewer.scene.primitives.add(tilesetClass);
            //添加倾斜摄影数据
            var tilesetModel = new Cesium.Cesium3DTileset({
                url,
            });
            tilesetModel.readyPromise
                .then(function (argument) {
                    nextTick(() => {
                        // loadingInstance.close();
                    });
                    viewer.scene.primitives.add(tilesetModel);
                    viewer.zoomTo(tilesetModel);
                })
                .otherwise(function (error) {});
            layerManager.Tile = tilesetModel;
            layerManager.vecTile = tilesetClass;
            //记录被选中的信息
            var selected = {
                feature: undefined,
                originalColor: new Cesium.Color(),
            };
            //鼠标移动显示的内容
            var nameOverlay = document.createElement("div");
            viewer.container.appendChild(nameOverlay);
            nameOverlay.style.display = "none";
            nameOverlay.style.position = "absolute";
            nameOverlay.style.bottom = "0";
            nameOverlay.style.left = "0";
            nameOverlay.style["pointer-events"] = "none";
            nameOverlay.style.padding = "4px";
            nameOverlay.style.backgroundColor = "#2592FC";
            nameOverlay.style.color = "black";
            //记录选中的实体
            var selectedEntity = new Cesium.Entity();
            selectedEntity.show = false;
            //记录高亮的单体
            var highlighted = {
                feature: undefined,
                originalColor: new Cesium.Color(),
            };
            //鼠标左键 点击选中显示的内容
            var nameOverlay1 = document.createElement("div");
            viewer.container.appendChild(nameOverlay1);
            nameOverlay1.style.display = "none";
            nameOverlay1.style.position = "absolute";
            nameOverlay1.style.bottom = "250" + "px";
            nameOverlay1.style.left = "250" + "px";
            nameOverlay1.style["pointer-events"] = "none";
            nameOverlay1.style.backgroundColor = "#2592FC";
            nameOverlay1.style.color = "black";
            //信息数据
            let nameObject = {
                0: {
                    point: [109.9831585509201, 19.898993827992918],
                    name: "消防水罐-02",
                    wd: "15摄氏度",
                    zl: "800吨",
                    currentzl: "600吨",
                    yl: "0.15MPa",
                },
                1: {
                    point: [109.98309613973433, 19.899166666675658],
                    name: "消防水罐-01",
                    wd: "15摄氏度",
                    zl: "800吨",
                    currentzl: "500吨",
                    yl: "0.15MPa",
                },
                2: {
                    point: [109.98288693171224, 19.89754648278515],
                    name: "凝析油罐-01",
                    wd: "15摄氏度",
                    zl: "500吨",
                    currentzl: "300吨",
                    yl: "0.15MPa",
                },
                3: {
                    point: [109.98261346522956, 19.897457426868794],
                    name: "凝析油罐-02",
                    wd: "15摄氏度",
                    zl: "500吨",
                    currentzl: "400吨",
                    yl: "0.15MPa",
                },
                4: {
                    point: [109.98341355644548, 19.897796863217344],
                    name: "凝析油罐-03",
                    wd: "15摄氏度",
                    zl: "400吨",
                    currentzl: "200吨",
                    yl: "0.15MPa",
                },
                5: {
                    point: [109.98346815289554, 19.89764283173056],
                    name: "凝析油罐-04",
                    wd: "15摄氏度",
                    zl: "400吨",
                    currentzl: "300吨",
                    yl: "0.15MPa",
                },
            };
            //鼠标移动事件
            viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(
                movement
            ) {
                // 取消高亮
                if (Cesium.defined(highlighted.feature)) {
                    highlighted.feature.color = highlighted.originalColor;
                    highlighted.feature = undefined;
                }
                // 拾取要素
                var pickedFeature = viewer.scene.pick(movement.endPosition);
                //隐藏其他信息框
                if (
                    !Cesium.defined(pickedFeature) ||
                    !Cesium.defined(pickedFeature.color)
                ) {
                    nameOverlay.style.display = "none";
                    nameOverlay1.style.display = "none";
                    return;
                }
                // 设置提示名称
                let a = 4;
                nameOverlay.style.display = "block";
                nameOverlay.style.bottom =
                    viewer.canvas.clientHeight - movement.endPosition.y + "px";
                nameOverlay.style.left = movement.endPosition.x + a + "px";
                // 罐桶信息
                var name = pickedFeature.getProperty("id");

                if (!Cesium.defined(name)) {
                    name = pickedFeature.getProperty("id");
                }
                for (let key in nameObject) {
                    if (key === name) {
                        nameOverlay.innerHTML = `<div class="dantihuaBox">
                           <div class=" span1">
                                名称：${nameObject[key].name} 
                           </div>
                               <div class="span1">

                                    <span>温度：</span>  
                                    ${nameObject[key].wd}
                               </div>

                               <div class="span1">
                                  总容量：${nameObject[key].zl}
                               </div>

                               <div class="span1">
                                  当前容量：${nameObject[key].currentzl}
                               </div>

                               <div class="span1">
                                    压力：${nameObject[key].yl}
                               </div>
                       </div>`;
                        break;
                        // <img src='${nameObject[key].url}'/>
                    }
                }
                //高亮要素
                if (pickedFeature !== selected.feature) {
                    highlighted.feature = pickedFeature;
                    Cesium.Color.clone(
                        pickedFeature.color,
                        highlighted.originalColor
                    );
                    pickedFeature.color = Cesium.Color.fromBytes(
                        37,
                        146,
                        252,
                        100
                    );
                }
            },
            Cesium.ScreenSpaceEventType.MOUSE_MOVE);
            //鼠标点击事件
            // viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
            //     nameOverlay.style.display = 'none';
            //     // 取消高亮
            //     if (Cesium.defined(selected.feature)) {
            //         selected.feature.color = selected.originalColor;
            //         selected.feature = undefined;
            //     }
            //     // 拾取要素
            //     var pickedFeature = viewer.scene.pick(movement.position);
            //     if (!Cesium.defined(pickedFeature)) {
            //         clickHandler(movement);
            //         return;
            //     }
            //     //当前要素
            //     if (selected.feature === pickedFeature) {
            //         return;
            //     }
            //     selected.feature = pickedFeature;
            //     //保存颜色
            //     if (pickedFeature === highlighted.feature) {
            //         Cesium.Color.clone(highlighted.originalColor, selected.originalColor);
            //         highlighted.feature = undefined;

            //     } else {
            //         Cesium.Color.clone(pickedFeature.color, selected.originalColor);
            //     }

            //     // 偏移量
            //     let a = 100
            //     // 高亮选中颜色
            //     pickedFeature.color = Cesium.Color.fromBytes(37, 146, 252, 255);
            //     var featureName = pickedFeature.getProperty('id');
            //     for (let key in nameObject) {
            //         if( document.getElementById('dantihuaInfo') ){
            //             css3Renderer.remove('zaihaiInfo')
            //         }
            //         if (key === featureName) {
            //             console.log("选中")
            //             // nameOverlay1.style.display = 'block'
            //             // nameOverlay1.style.bottom = viewer.canvas.clientHeight - movement.position.y - (a / 2) + 'px';
            //             // nameOverlay1.style.left = movement.position.x - (a * 4) + 'px';
            //             // nameOverlay1.innerHTML =
            //             // `<div class="dantihuaBox">
            //             //       <span class="clearfix span1">${key} <i class="i clearfix"></i></span>
            //             //       <img src='${nameObject[key].url}'/>
            //             // </div>`
            //             // break;
            //             css3Renderer.append({
            //                 id: 'dantihuaInfo',
            //                 position: [ nameObject[key].point[0] , nameObject[key].point[1] , 10],
            //                 element:`
            //                     <div class='ysc-dynamic-layer ys-css3-box' id='zaihaiInfo'>
            //                         <div class='line'></div>
            //                         <div class='mainTable'>
            //                             <div class="tableTitle">油罐</div>
            //                             <table border="5" style="
            //                             width: 100%;
            //                             line-height: 20px;
            //                             text-align: center;
            //                             border-color: #155e75;
            //                             border-collapse: collapse;">
            //                                 油罐
            //                             </table>
            //                         </div>
            //                     </div>
            //                 `,
            //                 offset:[10,-250 ]
            //             })

            //         }
            //     }
            //     // 显示属性信息
            //     // selectedEntity.name = featureName;
            //     // selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';

            //     // viewer.selectedEntity = selectedEntity;
            //     // viewer.selectedEntity.show = true
            //     // let porperies = pickedFeature.getPropertyNames();
            //     // let infosHtml = '<table class="cesium-infoBox-defaultTable"><tbody>你好啊'
            //     // porperies.map(item => {
            //     //     infosHtml += '<tr><th>' + item + '</th><td>' + pickedFeature.getProperty(item) + '</td></tr>'
            //     //         //console.log(item)

            //     // })
            //     // infosHtml += '</tbody></table>';
            //     // selectedEntity.description = infosHtml;
            // }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        }
        return {
            list,
            currIndex,
            openClose,
            childHandleClick,
            centerState,
            handleOpen,
            handleClose,
            handleSelect,
            currentColor,
        };
    },
};
</script>
<style >
.sideMenu .el-submenu__title:focus,
.sideMenu .el-submenu__title:hover {
    background: rgba(26, 83, 117, 0.9) !important;
}
.sideMenu .el-menu-item:focus,
.sideMenu .el-menu-item:hover {
    background: rgba(26, 83, 117, 0.9) !important;
}
.sideMenu .el-menu {
    border: none !important;
}
</style>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .sideMenu {
        position: absolute;
        right: vw(442);
        top: vh(110);
        width: vw(300);
        cursor: pointer;
        z-index: 3;

        .parentList {
            .parentTitle {
                width: vw(182);
                height: vh(50);
                line-height: vh(50);
                border: 1px solid #115178;
                background: rgba(10, 43, 60, 0.6);
                margin-top: vh(12);
                text-align: center;
                display: flex;
                justify-content: space-around;

                .color1 {
                    color: rgba(8, 199, 241, 1);
                }

                .color2 {
                    color: rgba(254, 175, 38, 1);
                }

                .color3 {
                    color: rgba(189, 86, 255, 1);
                }

                .color4 {
                    color: rgba(13, 222, 121, 1);
                }

                div:nth-child(2) {
                    font-size: vw(14);
                }

                div:nth-child(3) {
                    font-size: vw(22);
                }
            }

            .active {
                background: url('/data/images/sjhj/reca.png') no-repeat;
                background-size: 100% 100%;
            }

            .child {
                .childList {
                    width: vw(132);
                    height: vh(41);
                    margin-left: vw(50);
                    line-height: vh(41);
                    border: 1px solid #ddd;
                    margin-top: vh(5);
                    text-align: center;
                    background: rgba(10, 43, 60, 0.6);
                    border: 1px solid #115178;
                    font-size: vw(12);
                    transition: color 0.25s;
                }

                .childList::before, .childList::after {
                    border: 2px solid transparent;
                    width: 0;
                    height: 0;
                }

                .childList::before {
                    top: 0;
                    left: 0;
                }

                .childList::after {
                    bottom: 0;
                    right: 0;
                }

                .childList:hover {
                    color: #60daaa;
                }

                .childList:hover::before, .childList:hover::after {
                    width: 100%;
                    height: 100%;
                }

                .childList:hover::before {
                    border-top-color: #60daaa;
                    border-right-color: #60daaa;
                    transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
                }

                .childList:hover::after {
                    border-bottom-color: #60daaa;
                    border-left-color: #60daaa;
                    transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
                }

                // .childList:hover{
                // background:rgba(8,199,241,1)
                // }
                .childActive {
                    color: #81d2f8;
                }
            }
        }
    }
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .sideMenu {
        position: absolute;
        right: vw1(1000);
        top: vh(110);
        width: vw1(300);
        cursor: pointer;
        z-index: 3;

        .parentList {
            .parentTitle {
                width: vw1(182);
                height: vh(50);
                line-height: vh(50);
                border: 1px solid #115178;
                background: rgba(10, 43, 60, 0.6);
                margin-top: vh(12);
                text-align: center;
                display: flex;
                justify-content: space-around;

                .color1 {
                    color: rgba(8, 199, 241, 1);
                }

                .color2 {
                    color: rgba(254, 175, 38, 1);
                }

                .color3 {
                    color: rgba(189, 86, 255, 1);
                }

                .color4 {
                    color: rgba(13, 222, 121, 1);
                }

                div:nth-child(2) {
                    font-size: vw1(14);
                }

                div:nth-child(3) {
                    font-size: vw1(22);
                }
            }

            .active {
                background: url('/data/images/sjhj/reca.png') no-repeat;
                background-size: 100% 100%;
            }

            .child {
                .childList {
                    width: vw1(132);
                    height: vh(41);
                    margin-left: vw1(50);
                    line-height: vh(41);
                    border: 1px solid #ddd;
                    margin-top: vh(5);
                    text-align: center;
                    background: rgba(10, 43, 60, 0.6);
                    border: 1px solid #115178;
                    font-size: vw1(12);
                    transition: color 0.25s;
                }

                .childList::before, .childList::after {
                    border: 2px solid transparent;
                    width: 0;
                    height: 0;
                }

                .childList::before {
                    top: 0;
                    left: 0;
                }

                .childList::after {
                    bottom: 0;
                    right: 0;
                }

                .childList:hover {
                    color: #60daaa;
                }

                .childList:hover::before, .childList:hover::after {
                    width: 100%;
                    height: 100%;
                }

                .childList:hover::before {
                    border-top-color: #60daaa;
                    border-right-color: #60daaa;
                    transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
                }

                .childList:hover::after {
                    border-bottom-color: #60daaa;
                    border-left-color: #60daaa;
                    transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
                }

                // .childList:hover{
                // background:rgba(8,199,241,1)
                // }
                .childActive {
                    color: #81d2f8;
                }
            }
        }
    }
}
</style>